<!--
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2024-07-29 16:11:23
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2024-08-21 15:30:35
 * @FilePath: /vue3-uniapp/src/components/ui/CustomCollapse/CustomCollapse.vue
-->
<script lang="ts" setup>
const props = withDefaults(
    defineProps<{
        modelValue: boolean;
        title?: string;
        height?: string;
    }>(),
    {
        title: '标题',
        height: '80rpx'
    }
);
const emits = defineEmits<{
    (event: 'update:model-value', value: boolean): void;
}>();

const { title, height, modelValue } = toRefs(props);

const iconStyle = computed<Record<string, any>>(() => {
    if (modelValue.value) {
        return {
            transform: 'rotateZ(-180deg)',
            transition: 'transform .3s'
        };
    } else {
        return {
            transform: 'rotateZ(0)',
            transition: 'transform .3s'
        };
    }
});
</script>

<template>
    <view class="customcollapse-container">
        <uni-collapse
            @change="
                (val: string[]) => {
                    emits(
                        'update:model-value',
                        val.length > 0 && val[0] === '0'
                    );
                }
            "
        >
            <uni-collapse-item :show-arrow="false" :open="modelValue">
                <template #title>
                    <view class="header" :style="{ height }">
                        <slot name="title">
                            <text class="c-text1 text-sm">{{ title }}</text>
                        </slot>
                        <TnIcon
                            :name="'down'"
                            :custom-class="'c-text2'"
                            :custom-style="iconStyle"
                        />
                    </view>
                </template>
                <view class="bg-front">
                    <slot></slot>
                </view>
            </uni-collapse-item>
        </uni-collapse>
    </view>
</template>

<style lang="scss" scoped>
.customcollapse-container {
    .header {
        background: var(--bg-front);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0 30rpx;
    }
}
</style>
